<template>
  <c-permission-tabs v-model="activeTab" code="tab" type="card">
    <el-tab-pane label="全部" name="all" lazy>
      <Table ref="all" table-name="all" :tab-index="1" button-group-code="all" />
    </el-tab-pane>
    <el-tab-pane label="未分配" name="tobe_allocate" lazy>
      <Table ref="tobe_allocate" table-name="tobe_allocate" :tab-index="2" button-group-code="tobe_allocate" />
    </el-tab-pane>
    <el-tab-pane label="已分配" name="allocate" lazy>
      <Table ref="allocate" table-name="allocate" :tab-index="3" button-group-code="allocate" />
    </el-tab-pane>
  </c-permission-tabs>
</template>

<script>
import Table from './components/table'
export default {
  name: 'Task',
  components: {
    Table
  },
  props: {
  },
  data() {
    return {
      activeTab: 'all'
    }
  },
  computed: {
  },
  watch: {
    activeTab: {
      handler(v) {
        if (this.$refs[v]) {
          this.$nextTick(() => {
            this.refreshTableBoxData('onPage')
          })
        }
      }
    }
  },
  mounted() {
    this.refreshTableBoxData()
  },
  methods: {
    refreshTableBoxData(flag) {
      const activeTab = this.activeTab
      this.$nextTick(() => {
        this.$refs[activeTab] && this.$refs[activeTab].refreshTableBoxData(flag)
      })
    }
  }
}
</script>
